<template>
  <div>
    <!-- 图片上传组件辅助 -->
    <el-upload
      :action="uploadImgUrl"
      :headers="headers"
      :file-list="showList"
      list-type="picture-card"
      :on-success="afterUploadSuccess"
      :on-error="afterUploadError"
      :before-upload="beforeUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      accept=".jpg, .png, .bmp, .mp3, .mp4, .avi, .rmvb, .doc, .ppt, .xls"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <div slot="tip" class="el-upload__tip my_upload_tip">
      支持图片（png、jpg、bmp，最大5M）、音频（mp3，最大5M）、office（xls、doc、ppt，最大10M）和视频（mp4、avi、rmvb，最大50M），个数不限。
    </div>
    <el-dialog :close-on-click-modal="false" :visible.sync="imgDialogVisible" :append-to-body="true">
      <img width="100%" :src="imgDialogImageUrl" alt/>
    </el-dialog>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";

export default {
  props: {
    // 附件上传地址
    url: String,
    showList: Array
  },
  data() {
    return {
      // 附件列表
      fileList: [],
      // 附件预览地址
      imgDialogImageUrl: "",
      // 图片放大框可见性
      imgDialogVisible: false,
      // 下载和删除按钮有效性
      disabled: false,
      // 上传的图片服务器地址
      uploadImgUrl: process.env.VUE_APP_BASE_API + this.url,
      headers: {
        Authorization: getToken()
      }
    };
  },
  watch: {
    url: function () {
      this.uploadImgUrl = process.env.VUE_APP_BASE_API + this.url;
    }
  },
  methods: {
    // 删除附件
    handleRemove(file, fileList) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (file.response.fileName === this.fileList[i].fileName) {
          this.fileList.splice(i, 1);
          break;
        }
      }
    },
    // 图片预览
    handlePictureCardPreview(file) {

      this.imgDialogImageUrl = file.url;
      this.imgDialogVisible = true;
    },
    // 附件上传前
    beforeUpload(file) {
      let fileType = file.type;
      console.log(fileType)
      if (fileType === "image/jpeg" || fileType === "image/png" || fileType === "image/bmp") {
        if (file.size < 5 * 1024 * 1024) {
          return true;
        } else {
          this.$message.error("上传的图片不能超过5M");
          return false;
        }
      } else if (fileType === "audio/mpeg") {
        if (file.size < 5 * 1024 * 1024) {
          return true;
        } else {
          this.$message.error("上传的音频不能超过5M");
          return false;
        }
      } else if (fileType === "video/mp4" || fileType === "video/avi" || fileType === "video/rmvb") {
        if (file.size < 50 * 1024 * 1024) {
          return true;
        } else {
          this.$message.error("上传的视频不能超过50M");
          return false;
        }
      } else if (fileType === "application/msword" || fileType === "application/vnd.ms-powerpoint" || fileType === "application/vnd.ms-excel") {
        if (file.size < 10 * 1024 * 1024) {
          return true;
        } else {
          this.$message.error("上传的office文件不能超过10M");
          return false;
        }
      } else {
        this.$message.error("请上传上传符合规定的文件");
        return false;
      }
    },
    // 附件上传成功后
    afterUploadSuccess(res, file, fileList) {
      // res为图片服务器返回的数据
      // 如果上传成功
      // 插入图片  res.url为服务器返回的图片地址
      this.fileList.push(res);

    },
    // 附件上传失败
    afterUploadError(err, file, fileList) {
      for (let i = 0; i < fileList.length; i++) {
        if (file.uid === fileList[i].uid) {
          fileList.splice(i, 1);
          break;
        }
      }
      this.$message.error("文件上传失败");
    },
    showListFun() {
      if (this.showList !== undefined && this.showList.length > 0) {
        for (let i in this.showList) {
          let file = {};
          file.fileName = this.showList[i].url.replace(process.env.VUE_APP_BASE_API, "");
          file.attachmentType = this.showList[i].url.split(".")[this.showList[i].url.split(".").length - 1];
          file.url = this.showList[i].url.replace(process.env.VUE_APP_BASE_API, "");
          this.fileList.push(file);
        }
      }
    }
  },
  mounted() {
    this.showListFun();
  }
};
</script>

<style scoped>
.my_upload_tip {
  color: red;
}
</style>
